<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post请求</title>
    <script src="./js/axios.js"></script>
    <script src="./js/vue@3.5.12.global.js"></script>
</head>
<body>
    <div id="app">
        <button @click="getDataByPost">发送post请求</button>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return {

            }
        },
        methods:{
            getDataByPost(){
                //post请求
                /*axios.post('https://jsonplaceholder.typicode.com/posts')
                    .then(resp=>{
                        console.log(resp)
                    })
                    .catch(error=>{
                        console.log(error)
                    });*/
                //post请求传递参数：一般新增传递的参数较多
                /*axios.post('https://jsonplaceholder.typicode.com/posts',{
                        name:'jack',
                        gender: 1,
                        address:'乐山',
                        phone: 13541043055,
                        concat: 'rose'

                })
                    .then(resp=>{
                        console.log(resp)
                    })
                    .catch(error=>{
                        console.log(error)
                    });*/
                //使用FormData封装数据，然后传递
                let data = new FormData();
                data.append('name','jack')
                data.append('gender',1)
                data.append('address','乐山')
                data.append('phone','13541084055')
                axios.post('https://jsonplaceholder.typicode.com/posts',data)
                    .then(resp=>{
                        console.log(resp)
                    })
                    .catch(error=>{
                        console.log(error)
                    });
            }
        }
    })
    app.mount('#app');
</script>
</html>